<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  个人办事
  User: fzh
  Date: 2017/9/13
  Time: 14:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <title>个人办事</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/default.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/assets/js/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        .main-content {
            box-sizing: border-box;
            width: 100%;
            min-height: calc(100% - 212px);
            padding-top: 20px;
            padding-bottom: 20px;
            display: flex;
            justify-content: space-around;
        }

        .main-content-left,
        .main-content-right {
            border-left: 1px lightgrey solid;
            border-bottom: 1px lightgrey solid;
            border-right: 1px lightgrey solid;
        }

        .main-content-left {
            width: 25%;
        }

        .main-content-right {
            width: 65%;
        }

        .pane {
            width: 100%;
            height: 100%;
        }

        .pane-title {
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            align-items: center;
            border: 1px solid lightgrey;
            width: 100%;
            height: 30px;
            /*background-color: #E7E9DE;*/
            color: gray;
            background: linear-gradient(to bottom, #E3F8FF 0%, #F7F7F7 50%, #E3F8FF 100%);
        }

        .pane-title a:last-child:hover {
            cursor: pointer;
        }

        .pane-body {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            width: 100%;
            /*height: 100%;*/
        }

        .pane-body div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40%;
            height: 40px;
            padding: 5px 0;
        }

        .pane-body .item {
            position: relative;
            text-align: center;
            width: 80%;
            text-decoration: none;
            color: #222222;
            border: 1px solid #E3F8FF;
            background-color: #F7F7F7;
        }

        .pane-body .item:hover {
            cursor: pointer;
        }

        .pane-body .item:active {
            top: 1px;
            left: 1px;
        }

        .right .item {
            display: flex;
            box-sizing: border-box;
            flex-direction: column;
            align-items: stretch;
            justify-content: space-around;
            width: 100%;
            /*height: 60px;*/
            padding-bottom: 10px;
            padding-left: 20px;
            border-bottom: 1px solid lightgray;
        }

        .right .item > .title {
            width: 100%;
            padding-top: 10px;
            font-size: 18px;
        }

        .right .item > .description {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            font-size: 12px;
        }

        .right .description > .addr {
            padding-top: 5px;
            color: gray;
        }

        .right .description > .func {
            padding-top: 10px;
        }

        .right .func > a {
            text-decoration: none;
            padding: 1px 5px;
            border: 1px solid;
        }

        .right .cannot {
            border-color: gray;
            color: gray;
        }

        .right .cannot:hover {
            cursor: no-drop;
        }

        .right .can {
            border-color: #2CA4BF;
            color: #2CA4BF;
        }

        .right .can:hover {
            background-color: #2CA4BF;
            color: #FFFFFF;
        }
    </style>
</head>
<body>
<jsp:include page="../components/pageHeader.jsp"/>
<div class="main-content">
    <div class="main-content-left">
        <div class="pane">
            <div class="pane-title">机关部门</div>
            <div class="pane-body">
                <div>
                    <a class="item" href='<c:url value="/personal"/>'>全部</a>
                </div>
                <c:forEach items="${sessionScope.depts}" var="dept">
                    <div>
                        <a class="item" href='<c:url value="/personal/select?id=${dept.departmentId}"/>'><c:out
                                value="${dept.deptName}"/></a>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div>
    <div class="main-content-right">
        <div class="pane">
            <div class="pane-title">办事指南
                <div class="online">
                    <c:choose>
                        <c:when test="${requestScope.online}">
                            <input title="online" type="checkbox" checked="checked">可以在线办理
                        </c:when>
                        <c:otherwise>
                            <input title="online" type="checkbox">可以在线办理
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>
            <div class="right">
                <c:forEach items="${requestScope.guides}" var="guide">
                    <div class="item">
                        <div class="title">
                            <span>${guide.title }</span>
                        </div>
                        <div class="description">
                            <div class="addr">
                                办理地址:&nbsp;<span>${guide.addr}</span>
                            </div>
                            <div class="func">
                                <c:choose>
                                    <c:when test="${guide.online == 1}">
                                        <a href="#" class="can">在线申报</a>
                                    </c:when>
                                    <c:otherwise>
                                        <a href="#" class="cannot">在线申报</a>
                                    </c:otherwise>
                                </c:choose>
                                <a href="<c:url value="/guide/detail?id=${guide.guideId}"/>" class="can">查看指南</a>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div>
</div>
<jsp:include page="../components/pageFooter.jsp"/>
</body>
</html>